﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width" />
    <link href="../Styles/jquery.mobile-1.0b1.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/jquery.contextmenu.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/scrollbar.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/ui.button.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/lib/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/lib/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script src="../Scripts/lib/jquery.mobile-1.0b1.js" type="text/javascript"></script>
    <style>
        .header-title
        {
            float: left;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            margin: 4px;
            line-height: 32px;
        }
        
        .img-button
        {
            position: absolute;
            right: 4px;
        }
        .img-button .bar-finish
        {
            padding: 10px 6px 4px 10px;
        }
        
        .img-button .bar-finish .medium
        {
            font-size: 12px;
            padding: .5em .8em;
        }
        #contacts .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb
        {
            min-height: 40px;
            padding-left: 72px;
        }
        #contacts .ui-li-heading
        {
            font-size: 14px;
            font-weight: bold;
            display: block;
            margin: .6em 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .tabs
        {
            background: #f1f1f1; /* Old browsers */
            background: -moz-linear-gradient(top, #f1f1f1 0%, #d5d5d5 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(99%,#d5d5d5)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* Opera11.10+ */
            background: -ms-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* IE10+ */
            background: linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* W3C */
            -webkit-box-shadow: 1px 1px 5px #666;
            height: 28px;
        }
        .tabs #arrow
        {
            background: url(../Styles/app-arrow.png) repeat-x 40px;
        }
        .tabs #arrow
        {
            height: 10px;
            position: fixed;
            background: url(../Styles/app-arrow.png) repeat-x 40px;
        }
        .tabs .tabs-arrow
        {
            width: 100%;
            top: 66px;
            position: absolute;
        }
        .tabs .tab-item
        {
            width: 100%;
            top: 48px;
            font-size: 10px;
            color: #666;
            position: absolute;
        }
        .tabs .tab-feed
        {
            text-align: center;
        }
        .tabs .tab-contact
        {
            text-align: left;
        }
        .tabs .tab-project
        {
            text-align: right;
        }
        .tabs .tab-current
        {
            color: #000;
            font-size: 11px;
            font-weight: bold;
        }
        .tabs .txt-item
        {
            padding: 0 8px;
        }
    </style>
    <script>


        $(function () {
            var windowWidth = document.documentElement.clientWidth;

            $('#arrow').css({
                right: 0,
                left: (windowWidth - 106) / 2
            })

        });
       
    </script>
</head>
<body class="ui-mobile-viewport">
    <div data-role="page" class="type-interior ui-page ui-body-c ui-page-active">
        <div data-role="header" data-theme="a" class="ui-bar-f ui-header" role="banner">
            <div tabindex="0" role="heading" aria-level="1">
                <span class="header-title">Ezdesk</span>
                <div class="img-button">
                    <div class="bar-finish">
                        <span class="green medium">完成</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- /header -->
        <div class="tabs">
            <div class="tabs-arrow">
                <div id="arrow">
                </div>
            </div>
            <div class="tab-item tab-contact  tab-current">
                <span class="txt-item ">联系人</span>
            </div>
            <div class="tab-item tab-feed ">
                <span class="txt-item">消息</span>
            </div>
            <div class="tab-item tab-project">
                <span class="txt-item">项目</span>
            </div>
        </div>
        <!-- /tabs -->
        <div id="contacts" data-role="content" class="ui-content" role="main">
            <div class="content-primary">
                <ul data-role="listview" data-split-icon="gear" data-split-theme="d" class=" ui-listview ">
                    <li data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Photos2.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        Broken Bells</h3>
                                    <p class="ui-li-desc">
                                        Broken Bells</p>
                                </a>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                            </span>
                        </div>
                    </li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Safari.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        Warning</h3>
                                    <p class="ui-li-desc">
                                        Hot Chip</p>
                                </a>
                            </div>
                        </div>
                        <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                        </span></li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-hover-c">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Notes2.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        Wolfgang Amadeus Phoenix</h3>
                                    <p class="ui-li-desc">
                                        Phoenix</p>
                                </a>
                            </div>
                        </div>
                        <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                        </span></li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Pandora.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        Of The Blue Colour Of The Sky</h3>
                                    <p class="ui-li-desc">
                                        Ok Go</p>
                                </a>
                            </div>
                        </div>
                        <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                        </span></li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Phone.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        Elephant</h3>
                                    <p class="ui-li-desc">
                                        The White Stripes</p>
                                </a>
                            </div>
                        </div>
                        <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                        </span></li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Photos.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        Kid A</h3>
                                    <p class="ui-li-desc">
                                        Radiohead</p>
                                </a>
                            </div>
                        </div>
                        <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                        </span></li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Remote.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        XX</h3>
                                    <p class="ui-li-desc">
                                        XX</p>
                                </a>
                            </div>
                        </div>
                        <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                        </span></li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-hover-c">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Notes2.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        Wolfgang Amadeus Phoenix</h3>
                                    <p class="ui-li-desc">
                                        Phoenix</p>
                                </a>
                            </div>
                        </div>
                        <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                        </span></li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                        <div class="ui-btn-inner ui-li ui-li-has-alt">
                            <div class="ui-btn-text">
                                <a class="ui-link-inherit">
                                    <img src="../Styles/Pandora.png" class="ui-li-thumb">
                                    <h3 class="ui-li-heading">
                                        Of The Blue Colour Of The Sky</h3>
                                    <p class="ui-li-desc">
                                        Ok Go</p>
                                </a>
                            </div>
                        </div>
                        <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                        </span></li>
                </ul>
            </div>
            <!--/content-primary -->
        </div>
        <!-- /content -->
    </div>
</body>
</html>
